<template>
  <div class="workFlowDetail">
    <div style="margin-bottom: 10px">
      <jc-button
        :btn-arr="['remove', 'reload', 'option', 'push', 'pass', 'sub', 'save', 'list']"
        :disab-arr="[isDisabled && 'save', 'close', 'cancel', 'toExcel', 'using', 'com1', 'com2', 'freeze']"
        :fbillno="production.fbillNo"
        :list="'/outProcess'"
        @save="save"
        @refresh="workDetail"
        @submit="submit(1)"
        @noSubmit="submit(2)"
        @audit="audit(1)"
        @noAudit="audit(2)"
        @del="delPublic"
        @pushDown="pushDown"
      />
    </div>
    <el-tabs v-model="activeName" @tab-click="handleOther">
      <el-tab-pane :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="production" label-width="100px" size="mini">
          <el-form-item :label="$t('market.documentstatus')">
            <el-tag :type="production.stateColor">{{ production.fdocumentstatus }}</el-tag>
          </el-form-item>
          <el-form-item :label="$t('market.orderDate')">
            <el-date-picker
              v-model.trim="production.fdate"
              type="date"
              value-format="yyyy-MM-dd"
              :disabled="isDisabled"
            />
          </el-form-item>
          <el-form-item :label="$t('market.orderNum')">
            <el-input v-model.trim="production.fbillNo" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.salOrder')">
            <el-input v-model.trim="production.fbilltype" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.suppliernumber')">
            <el-input v-model.trim="production.fsuppliernumber" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.suppliername')">
            <el-input v-model.trim="production.fsupplier" :disabled="isDisabled">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="supplierVisiblit=true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.paezText1')">
            <el-input v-model.trim="production.f_paez_text" disabled size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.srcbillno')">
            <el-input v-model.trim="production.fsrcbillno" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.moseq')">
            <el-input v-model.trim="production.fmoseq" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.srcmoqty')">
            <el-input v-model.trim="production.fmoqty" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fmodel')">
            <el-input v-model.trim="production.fmodel" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fmaterial')">
            <el-input v-model.trim="production.fnumber" disabled />
          </el-form-item>
          <el-form-item :label="$t('shop.fname2')">
            <el-input v-model.trim="production.fname" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.funit')">
            <el-input v-model.trim="production.funit" disabled />
          </el-form-item>
          <el-form-item :label="$t('shop.fspecificaTion')">
            <el-input v-model.trim="production.fspecificaTion" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fdescripTion')">
            <el-input v-model.trim="production.fdescripTion" style="width: 400px;" disabled />
          </el-form-item>
        </el-form>
        <div style="margin-top: 10px;">
          <el-button size="mini" style="margin-bottom: 5px;" :disabled="isDisabled" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" style="margin-bottom: 5px;" :disabled="isDisabled" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeard"
          :table-height="tableHeight"
          serial
          :get-summaries="getSummaries"
          show-summary
          @rowClick="rowClick"
        >
          <!--    工序名称       -->
          <template v-slot:billSlot="col">
            <el-input v-model="col.scope.row.fworkname" size="mini" :disabled="isDisabled">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="sourcing(col.scope.$index)"
              />
            </el-input>
          </template>
          <!-- 确认单价 -->
          <template v-slot:btnState="col">
            <el-input-number
              v-model="col.scope.row.fnowfprice"
              size="mini"
              controls-position="right"
              :disabled="isDisabled"
              @change="moneyHeadel(col.scope.$index)"
            />
          </template>
        </jc-table>
      </el-tab-pane>
      <el-tab-pane :label="$t('market.other')" name="log">
        <jc-marker
          ref="log"
          :fnumber="production.fbillNo"
          other-height="64vh"
          :other-url-object="otherUrlObject"
        />
      </el-tab-pane>
    </el-tabs>
    <!--供应商-->
    <supplier v-if="supplierVisiblit" :order="1" @supplier="supplierData" />
    <el-dialog
      v-dialogDrag
      :title="$t('market.checkBill')"
      model
      :visible.sync="isdanjuDialog"
      :close-on-click-modal="false"
      width="600px"
      top="5vh"
      center
    >
      <div style="text-align: center;height: 100px;line-height: 100px">
        <el-radio-group v-model="orderLX" @change="handleOrder">
          <el-radio v-for="item in receipts" :key="item" :label="item">{{ item }}</el-radio>
        </el-radio-group>
      </div>
      <hr>
      <div style="text-align: center;">
        {{ $t('market.rule') }}
        <el-input v-model="convert" size="mini" disabled style="width: 178px;margin-bottom: 5px;" />
        <br>
        {{ $t('market.billType') }}
        <el-select
          v-model.trim="fbillTypeId"
          size="mini"
          filterable
        >
          <el-option
            v-for="(item, index) in billTypeData"
            :key="index"
            :label="item.fname"
            :value="item.fid"
          />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isdanjuDialog = false">{{ $t('btn.cancel') }}</el-button>
        <el-button size="mini" type="primary" @click="pushDownOrder()">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
    <!--工序-->
    <outSourc v-if="sourcingVis" :fsupplierid="production.fsupplierid" :fmaterialid="production.fmodel" @supplier="sourcData" />
  </div>
</template>

<script>
import {
  outsourceAudit,
  outsourceAuSubmit,
  outsourceDelete,
  outsourceSubmit,
  outsourceUnAudit,
  pushOutsourceInStock,
  pushToFinPayableFromMulOutSource,
  queryOutsourceDetails,
  queryWorkSupplierInfo,
  updateOutsource
} from '@/api/production/process'
import jcMarker from '@/components/marker'
import jcButton from '@/components/Button'
import { notoMxBmina, toMxBmina } from '@/components/ToMxamineState'
import { queryViewItem } from '@/api/marketManage/marketOrder'
import jumpMateriel from '@/components/JumpMateriel'

export default {
  components: {
    outSourc: () => import('@/views/production/process/component/outSourc'),
    supplier: () => import('@/views/purchasing/purchase/treePurchasePrice/component/supplier'),
    jcMarker,
    jcButton
  },
  mixins: [jumpMateriel],
  data() {
    return {
      sourcingVis: false,
      orderLX: this.$t('menu.outStorageOrder'),
      receipts: [this.$t('menu.payable'), this.$t('menu.outStorageOrder')], // 生产'外包入库单'
      fbillTypeId: 1427,
      convert: this.$t('market.wbzyf'),
      billTypeData: [], // 采购订单单据
      isdanjuDialog: false,
      activeName: 'first',
      production: {},
      tableData: [],
      tableHeard: [
        { label: this.$t('market.processname'), prop: 'fnumber', minWidth: '100' },
        { label: this.$t('market.processnumber'), type: 'bill', prop: 'fworkname', minWidth: '100' },
        { label: this.$t('market.multiple'), prop: 'fnum', minWidth: '80' },
        { label: this.$t('market.fqty'), prop: 'fqty', minWidth: '80' },
        { label: this.$t('market.fprice'), prop: 'fprice', minWidth: '80' },
        { label: this.$t('market.billamount'), prop: 'fsumprice', minWidth: '80' },
        { label: this.$t('market.nowfprice'), type: 'state', prop: 'fnowfprice', minWidth: '80' },
        { label: this.$t('market.nowsumprice'), prop: 'fnowsumprice', minWidth: '80' },
        { label: this.$t('market.yipushqty'), prop: 'fpushqty', minWidth: '80' },
        { label: this.$t('market.instockqty'), prop: 'finstockqty', minWidth: '80' },
        { label: this.$t('market.note'), prop: 'fremark', minWidth: '80' }
      ],
      supplierVisiblit: false,
      isDisabled: false,
      delFentrys: [],
      indexSelf: 0,
      tableHeight: '67vh',
      otherUrlObject: {}
    }
  },
  created() {
    if (this.$route.params.id) {
      this.workDetail()
    }
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 330px)' : '72vh'
  },
  methods: {
    // 修改
    save() {
      this.production.details = this.tableData
      updateOutsource({ ...notoMxBmina(this.production) }).then(res => {
        if (res.code === 0) {
          this.workDetail()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 详情
    workDetail() {
      queryOutsourceDetails({ fid: this.$route.params.id }).then(res => {
        if (res.code === 0) {
          this.production = toMxBmina(res.data)
          this.isDisabled = this.production.fdocumentstatus === this.$t('market.state1') || this.production.fdocumentstatus === this.$t('market.state2')
          this.otherUrlObject = res.data
          this.tableData = res.data.details
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 工序名称
    sourcing(index) {
      this.sourcingVis = true
      this.indexSelf = index
    },
    // 工序
    sourcData(ev) {
      if (ev.fworknameid) {
        const item = this.tableData[this.indexSelf]
        item.fworkname = ev.fworkname
        item.fnumber = ev.fnumber
        item.fworknameid = ev.fworknameid
        item.fnum = ev.fnum
        item.fprice = ev.fprice
        item.fnowfprice = ev.fprice
        item.fsumprice = (ev.fprice * this.production.fmoqty).toFixed(2)
        item.fnowsumprice = (ev.fprice * this.production.fmoqty).toFixed(2)
      }
      this.sourcingVis = false
    },
    // 获取供应商
    supplierData(ev) {
      if (ev.fsupplierId) {
        this.production.fsupplierid = ev.fsupplierId
        this.production.fsupplier = ev.fname
        this.production.fsuppliernumber = ev.fnumber
        this.workSupplier(ev.fsupplierId)
      }
      this.supplierVisiblit = false
    }, // 获取明细
    workSupplier(fsupplierid) {
      const DATA = {
        fsupplierid,
        fmaterialid: this.production.fmaterialid,
        fqty: this.production.fmoqty
      }
      queryWorkSupplierInfo(DATA).then(res => {
        this.tableData = res.data
      })
    },
    // 监听确认单价
    moneyHeadel(index) {
      const item = this.tableData[index]
      item.fnowsumprice = (item.fnowfprice * item.fqty).toFixed(2)
    },
    // 公共函数
    toExamineFun(api) {
      const DATA = { Numbers: [this.production.fbillNo] }
      api(DATA).then(res => {
        if (res.code !== 0) {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
          return
        }
        this.innerHTM = ''
        res.data.forEach(res => {
          this.innerHTM += '<div>' + res + '</div>'
        })
        this.$notify.warning({
          title: '提示',
          message: this.innerHTM,
          duration: 3000, offset: 50,
          dangerouslyUseHTMLString: true
        })
        this.workDetail()
      })
    },
    // 审批通过
    async audit(ev) {
      const api = ev === 1 ? outsourceAudit : outsourceUnAudit
      this.toExamineFun(api)
    },
    // 提交、反提交
    async submit(ev) {
      const api = ev === 1 ? outsourceSubmit : outsourceAuSubmit
      this.toExamineFun(api)
    },
    // 删除
    delPublic() {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const DATA = { Numbers: [this.production.fbillNo] }
        outsourceDelete(DATA).then(res => {
          if (res.code !== 0) {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
            return
          }
          this.innerHTM = ''
          res.data.forEach(res => {
            this.innerHTM += '<div>' + res + '</div>'
          })
          this.$notify.warning({
            title: '提示',
            message: this.innerHTM,
            duration: 3000, offset: 50,
            dangerouslyUseHTMLString: true
          })
          // 关闭当前页面
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$router.replace({ path: '/outProcess' })
        })
      })
    },
    // 下推
    pushDown() {
      this.queryTBasBilltype('SX_OUTSOURCE_INSTOCK')
      this.isdanjuDialog = true
    },
    handleOrder(val) {
      if (val === this.$t('menu.payable')) {
        this.convert = this.$t('market.wbzyf')
        this.fbillTypeId = 1249
        this.queryTBasBilltype('SX_PAYABLEBILLTYPE')
      } else if (val === this.$t('menu.outStorageOrder')) {
        this.convert = this.$t('market.wbzrk') // '外包单至外包入库单'
        this.fbillTypeId = 1427
        this.queryTBasBilltype('SX_OUTSOURCE_INSTOCK')
      }
    },
    // 查询单据类型
    async queryTBasBilltype(ev) {
      const { data: RES } = await queryViewItem({ viewName: ev })
      this.billTypeData = RES.list
    }, // 外包单下推标准应付单
    pushDownOrder() {
      this.EntryIds = []
      this.tableData.forEach(res => {
        this.EntryIds.push(res.fentryid)
      })
      const DATA = {
        SourceIds: [Number(this.$route.params.id)],
        EntryIds: this.EntryIds,
        fbillTypeId: this.fbillTypeId
      }
      if (this.orderLX === this.$t('menu.payable')) {
        pushToFinPayableFromMulOutSource(DATA).then(res => {
          if (res.code === 0) {
            this.isdanjuDialog = false
            this.$router.push({ path: `/payableDetail/${res.data.fid}` })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      } else if (this.orderLX === this.$t('menu.outStorageOrder')) {
        pushOutsourceInStock(DATA).then(res => {
          if (res.code === 0) {
            this.isdanjuDialog = false
            this.$router.push({ path: `/outStorageDetail/${res.data.fid}` })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      }
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    newHang() {
      this.tableData.push({
        fentryid: 0,
        fnumber: '',
        fworkname: '',
        fnum: 1,
        fqty: this.production.fmoqty,
        fprice: 0,
        fsumprice: 0,
        fnowfprice: 0,
        fnowsumprice: 0,
        fpushqty: 0,
        finstockqty: 0,
        fremark: ''
      })
    },
    // 删除行
    delHang() {
      this.tableData.splice(this.indexSelf, 1)
    },
    handleOther(tab) {
      if (tab.name === 'log') {
        this.$refs.log.otherlog()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.workFlowDetail {
  @include listBom;
  padding: 10px;
  background: #FFFFFF;
  min-height: 89vh;
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon {
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      height: 35px;
      width: 275px;
      min-width: 246px;
      margin-bottom: 5px;

      .btnType {
        margin-right: 5px;
      }

      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
